<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>商城--结算页</title>

    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-getOrderInfo.css"/>
</head>

<body>
<!--head-->
<div id="orderInfoApp">
    <div class="top">
        <shortcut/>
    </div>

    <div class="cart py-container">

        <!--logoArea-->
        <div class="logoArea">
            <a href="#">
                <div class="fl logo"><span class="title">结算页</span></div>
            </a>
        </div>

        <!--主内容-->
        <div class="checkout py-container">
            <div class="checkout-tit">
                <h4 class="tit-txt">填写并核对订单信息</h4>
            </div>
            <div class="checkout-steps">
                <!--收件人信息-->
                <div class="step-tit">
                    <h5>收件人信息<span><a @click="addAddress" data-toggle="modal" data-target=".edit" data-keyboard="false"
                                      class="newadd">新增收货地址</a></span></h5>
                </div>
                <div class="step-cont">
                    <div class="addressInfo">
                        <ul class="addr-detail">
                            <li class="addr-item" v-for="(a,i) in addresses" :key="i">
                                <div>
                                    <div :class="{con:true,name:true,selected:i === selectedAddress}"><a
                                            href="javascript:;" @click.stop="selectedAddress=i">{{a.name}}<span
                                            title="点击取消选择"></span>&nbsp;</a></div>
                                    <div class="con address">{{a.state + a.city + a.district + a.address}} <span>{{a.phone}}</span>
                                        <span class="base" v-if="a.defaultAddress">默认地址</span>
                                        <span class="edittext">
                                            <a data-toggle="modal" @click="editAddress(a.id)" data-target=".edit"
                                               data-keyboard="false">编辑</a>&nbsp;&nbsp;
                                            <a href="javascript:;" @click="deleteAddress(a.id)">删除</a></span>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>

                            </li>
                        </ul>
                        <!--添加地址-->
                        <div tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade edit">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" @click="clear" data-dismiss="modal" aria-hidden="true"
                                                class="sui-close">×
                                        </button>
                                        <h4 id="myModalLabel" class="modal-title">{{isEdit ? "编辑" : "添加"}}收货地址</h4>
                                    </div>
                                    <div class="modal-body">
                                        <form id="myform" action="" class="sui-form form-horizontal">
                                            <div class="control-group">
                                                <label class="control-label">收货人：</label>
                                                <div class="controls">
                                                    <input type="text" v-model="addressForm.name" class="input-medium">
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label">联系电话：</label>
                                                <div class="controls">
                                                    <input type="text" v-model="addressForm.phone" class="input-medium">
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label">省：</label>
                                                <div class="controls">
                                                    <input type="text" v-model="addressForm.state" class="input-medium">
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label">市：</label>
                                                <div class="controls">
                                                    <input type="text" v-model="addressForm.city" class="input-medium">
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label">区/县：</label>
                                                <div class="controls">
                                                    <input type="text" v-model="addressForm.district"
                                                           class="input-medium">
                                                </div>
                                            </div>

                                            <div class="control-group">
                                                <label class="control-label">邮编：</label>
                                                <div class="controls">
                                                    <input type="text" v-model="addressForm.zipCode"
                                                           class="input-medium">
                                                </div>
                                            </div>

                                            <div class="control-group">
                                                <label class="control-label">详细地址：</label>
                                                <div class="controls">
                                                    <input type="text" v-model="addressForm.address"
                                                           class="input-large">
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label">地址标签：</label>
                                                <div class="controls">
                                                    <select class="select" v-model="addressForm.label">
                                                        <option value="家">家</option>
                                                        <option value="公司">公司</option>
                                                        <option value="学校">学校</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <div style="margin-left: 100px">
                                                    <input type="checkbox" v-model="addressForm.defaultAddress"
                                                           class="checkbox">设为默认收货地址
                                                </div>
                                            </div>

                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" @click="addressSave" data-ok="modal"
                                                class="sui-btn btn-primary btn-large">确定
                                        </button>
                                        <button type="button" @click="clear" data-dismiss="modal"
                                                class="sui-btn btn-default btn-large">取消
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--确认地址-->
                    </div>
                    <div class="hr"></div>

                </div>
                <div class="hr"></div>
                <!--支付和送货-->
                <div class="payshipInfo">
                    <div class="step-tit">
                        <h5>支付方式</h5>
                    </div>
                    <div class="step-cont">
                        <ul class="payType">
                            <li :class="{selected : order.paymentType == 1}" @click="order.paymentType = 1">
                                微信付款<span title="点击取消选择"></span>
                            </li>
                            <li :class="{selected : order.paymentType == 2}" @click="order.paymentType = 2">
                                货到付款<span title="点击取消选择"></span>
                            </li>
                        </ul>
                    </div>
                    <div class="hr"></div>
                    <div class="step-tit">
                        <h5>送货清单</h5>
                    </div>
                    <div class="step-cont">
                        <ul class="send-detail">
                            <li v-for="(good,index) in carts" :key="index">
                                <div class="sendGoods">
                                    <ul class="yui3-g">
                                        <li class="yui3-u-1-6">
                                            <span><img width="70px" height="70px" :src="good.image"/></span>
                                        </li>
                                        <li class="yui3-u-7-12">
                                            <div class="desc" v-text="good.title"></div>
                                            <div class="seven">
												<span v-for="(v,k,i) in JSON.parse(good.ownSpec)" :key="k">
                                                        <span v-text="( i>0 ? '|': '') + k"
                                                              style="color: #0d47a1"></span>:<span v-text="v"
                                                                                                   style="color: red"></span>
												</span>
                                            </div>
                                        </li>
                                        <li class="yui3-u-1-12">
                                            <div class="price">￥{{sp.formatPrice(good.price * good.num)}}</div>
                                        </li>
                                        <li class="yui3-u-1-12">
                                            <div class="num">X{{good.num}}</div>
                                        </li>
                                        <li class="yui3-u-1-12">
                                            <div class="exit">有货</div>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="hr"></div>
                </div>
                <div class="linkInfo">
                    <div class="step-tit">
                        <h5>发票信息</h5>
                    </div>
                    <div class="step-cont">
                        <span>普通发票（电子）</span>
                        <span>个人</span>
                        <span>明细</span>
                    </div>
                </div>
                <div class="cardInfo">
                    <div class="step-tit">
                        <h5>使用优惠/抵用</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="order-summary">
            <div class="static fr">
                <div class="list">
                    <span><i class="number">{{totalNum}}</i>件商品，总商品金额</span>
                    <em class="allprice">¥{{sp.formatPrice(totalPay)}}</em>
                </div>
                <div class="list">
                    <span>返现：</span>
                    <em class="money">{{sp.formatPrice(order.discount)}}</em>
                </div>
                <div class="list">
                    <span>运费：</span>
                    <em class="transport">{{sp.formatPrice(order.postFee)}}</em>
                </div>
            </div>
        </div>
        <div class="clearfix trade">
            <div class="fc-price">应付金额:　<span class="price">¥{{sp.formatPrice(actualPay)}}</span></div>
            <div class="fc-receiverInfo">
                寄送至:{{addresses[selectedAddress].address}}
                收货人：{{addresses[selectedAddress].name}} {{addresses[selectedAddress].phone}}
            </div>
        </div>
        <div class="submit">
            <a class="sui-btn btn-danger btn-xlarge" href="pay.html" @click.prevent="submit">提交订单</a>
        </div>
    </div>

</div>
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
    var orderInfoVm = new Vue({
        el: "#orderInfoApp",
        data: {
            sp,
            isEdit: false, //新增或修改标记
            addressForm: {		//保存form表单中的地址信息
                name: '',  //收货人
                phone: '', //收货人电话
                zipCode: '', //收货人邮编
                state: '',   //省份
                city: '',  //市
                district: '', // 区/县
                address: '', //详细地址
                label: '', //标签
                defaultAddress: false //是否为默认地址
            },
            addresses: [// 可选地址列表,假数据，需要从后台查询
                {
                    name: '小何',  //收货人
                    phone: '18277055541', //收货人电话
                    zipCode: '538001', //收货人邮编
                    state: '广西壮族自治区',   //省份
                    city: '防城港市',  //市
                    district: '港口区', // 区/县
                    address: '沙潭江富康市场13号', //详细地址
                    label: '家', //标签
                    defaultAddress: true //是否为默认地址
                }, {
                    name: '波卡洪塔思',  //收货人
                    phone: '15860678391', //收货人电话
                    zipCode: '536666', //收货人邮编
                    state: '福建',   //省份
                    city: '宁德市',  //市
                    district: '霞浦县', // 区/县
                    address: '茶厂路666号', //详细地址
                    label: '家', //标签
                    defaultAddress: false //是否为默认地址
                },
            ],
            selectedAddress: 0,//选中的快递地址下标
            order: {
                paymentType: 1, //付款方式，默认1：微信支付
                postFee: 0, //邮费
                discount: 0 //优惠
            },
            carts: []
        },
        components: {
            shortcut: () => import("/js/pages/shortcut.js"),
        },
        created() {
            this.loadData();
        },
        computed: {
            totalNum() {
                return this.carts.reduce((c1, c2) => c1 + c2.num, 0);
            },
            totalPay() {
                return this.carts.reduce((c1, c2) => c1 + c2.price * c2.num, 0);
            },
            actualPay() {
                return this.totalPay + this.order.postFee - this.order.discount;
            }
        },
        methods: {
            clear() {
                this.addressForm = {};
                document.getElementById("myform").reset();
            },
            addAddress() {
                this.isEdit = false;
                this.clear();
            },
            addressSave() {
                //1.验证是否登录
                sp.verifyUser().then(() => {
                    //2.登录，发起请求，保存或者修改地址
                    if (this.isEdit === false) {
                        //2.1新增
                        sp.http.post("/address", this.addressForm).then(() => {
                            //保存成功，重新加载数据
                            this.loadData();
                            //清空表单
                            this.clear();
                        }).catch()
                    } else {
                        //2.2 修改
                        sp.http.put("/address", this.addressForm).then(() => {
                            //修改成功，重新加载数据
                            this.loadData();
                            //清空表单
                            this.clear();
                        }).catch()
                    }
                }).catch(() => {
                    //3.未登录
                    window.location.href = "/login.html?returnUrl=" + window.location.href;
                });
            },
            deleteAddress(id) {
                sp.verifyUser().then(() => {
                    sp.http.delete("/address/" + id).then(() => {
                        this.loadData();
                    })
                }).catch(() => {
                    window.location.href = "/login.html?returnUrl=" + window.location.href;
                });
            },
            editAddress(id) {
                this.isEdit = true;
                sp.verifyUser().then(() => {
                    sp.http.get("address/" + id).then(({data}) => {
                        this.addressForm = data;
                    })
                }).catch(() => {
                    window.location = "/login.html?returnUrl=" + window.location.href;
                })
            },
            loadData() {
                sp.verifyUser().then(() => {
                    //已经登录，获取购物车中要下单的信息
                    this.carts = sp.store.get("selectedCarts") || [];
                }).catch(() => {
                    //未登录，重定向到登录页面
                    window.location = "/login.html?returnUrl=" + window.location.href;
                })
            },
            submit() {
                sp.verifyUser().then(() => {
                    //已登录，进行订单提交
                    //1.把购物车数据处理成订单对象
                    const orderDetails = this.carts.map(({userId, ...rest}) => rest);
                    //2.处理物流信息
                    const addr = this.addresses[this.selectedAddress];
                    const obj = {
                        receiver: addr.name,
                        receiverState: addr.state,
                        receiverCity: addr.city,
                        receiverAddress: addr.address,
                        receiverDistrict: addr.district,
                        receiverMobile: addr.phone,
                        receiverZip: addr.zipCode
                    };
                    //3.复制到订单对象
                    Object.assign(this.order, obj, {
                        orderDetails,
                        totalPay: this.totalPay,
                        actualPay: this.actualPay,
                    });
                    //4.提交订单
                    sp.http.post("/order", this.order, {
                        transformResponse: [ //对响应进行处理的回调
                            function (data) {
                                //不对data做任何处理，直接返回
                                return data;
                            }
                        ]
                    }).then(({data}) => {
                        // 添加总金额到本地数据
                        sp.store.set("totalPay",this.actualPay);
                        // 在线支付，需要到付款页
                        window.location = "/pay.html?orderId=" + data;
                    }).catch(() => {
                        alert("创建订单失败!");
                    })
                }).catch(() => {
                    //未登录，重定向到登录页面
                    window.location = "/login.html?returnUrl=" + window.location.href;
                })
            }
        }
    });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<script>
    $(function () {
        $(".address").hover(function () {
            $(this).addClass("address-hover");
        }, function () {
            $(this).removeClass("address-hover");
        });
    });
    $(function () {
        $(".addr-item .name").click(function () {
            $(this).toggleClass("selected").siblings().removeClass("selected");
        });
        $(".payType li").click(function () {
            $(this).toggleClass("selected").siblings().removeClass("selected");
        });
    });
</script>
<!--页面底部END-->

<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<!--<script type="text/javascript" src="js/pages/getOrderInfo.js"></script>-->
</body>

</html>